<template>
    <div class="wraps">
        <div class="banner">
            <div class="img-wrap">
                广告
            </div>
            <div class="title">
                改变你的洗车方式
            </div>
            <div class="desc-top">
                洗车已完毕
            </div>
            <div class="desc-bottom">
                请退出洗车区域
            </div>
        </div>
        <div id="map"></div>
        <div class="dingdan-info">
            <div class="title">订单信息</div>
            <div class="wrap-list clear">
                <div class="left color-gray">服务车辆</div>
                <div class="right">浙AR09234</div>
            </div>
            <div class="wrap-list clear">
                <div class="left color-gray">服务站点</div>
                <div class="right">明石商业大厦站</div>
            </div>
            <div class="wrap-list clear">
                <div class="left color-gray">服务时间</div>
                <div class="right">2018-10-18 14:22:45</div>
            </div>
            <div class="wrap-list clear">
                <div class="left color-gray">已支付</div>
                <div class="right">10元</div>
            </div>
        </div>
        <div class="photo-duibi">
            <div class="photo-header">
                服务照片
            </div>
            <div class="title">洗车前</div>
            <div class="photo">

            </div>
            <div class="title">洗车后</div>
            <div class="photo">
                
            </div>
        </div>
        <div class="xieyi">
            <p>我已阅读并同意《服务协议》的相关约定，我已知晓相关风险并自行承担相关责任</p>
            <time>签署日期：2018年10月08日 14:32:48</time>
        </div>
        <div class="pingjia-info">
            <div class="top clear">
                <div class="left">服务评价</div>
                <div class="right">很满意</div>
            </div>
            <div class="bottom">
                快方便
            </div>
        </div>
        <div class="zhuyi">
            <div class="title">注意事项</div>
            <div class="clear">
                <div class="left">555</div>
                <div class="right">
                    洗车期间禁止移动车辆、上下车或伸出窗外张望，因机器移动容易发生危险。
                </div>
            </div>
            <div class="clear bg-gray">
                <div class="left">555</div>
                <div class="right">
                    洗车期间禁止移动车辆、上下车或伸出窗外张望，因机器移动容易发生危险。
                </div>
            </div>
            <div class="clear">
                <div class="left">555</div>
                <div class="right">
                    洗车期间禁止移动车辆、上下车或伸出窗外张望，因机器移动容易发生危险。
                </div>
            </div>
            <div class="clear bg-gray">
                <div class="left">555</div>
                <div class="right">
                    洗车期间禁止移动车辆、上下车或伸出窗外张望，因机器移动容易发生危险。
                </div>
            </div>
        </div>
        <div class="phone clear">
            <div class="left">报警求助</div>
            <div class="right">18679056174</div>
        </div>
        <div class="liaojie">
            <div class="title">
                了解我们
            </div>
            <div class="box">

            </div>
        </div>
    </div>
</template>
<script>
export default {
    mounted(){
        var map = new BMap.Map("map");    // 创建Map实例
        map.centerAndZoom(new BMap.Point(116.404, 39.915), 11);  // 初始化地图,设置中心点坐标和地图级别
        //添加地图类型控件
        map.addControl(new BMap.MapTypeControl({
            mapTypes:[
                BMAP_NORMAL_MAP,
                BMAP_HYBRID_MAP
            ]}));	  
        map.setCurrentCity("北京");          // 设置地图显示的城市 此项是必须设置的
        map.enableScrollWheelZoom(true);  
    }
}
</script>

<style scoped>
    .wraps{
        background:#f5f5f5;
    }
    .banner{
        height:7.43rem;
        padding:.2rem;
        background:#c59d4e;
        border-bottom-right-radius: 4em .5em;
        border-bottom-left-radius: 4em .5em;
    }
    .img-wrap{
        margin:0 auto;
        width:7.06rem;
        height:3.02rem;
        background:#d0ebff;
    }
    .banner .title{
        height:2.14rem;
        line-height:2.14rem;
        text-align:center;
        font-size:.32rem;
    }
    .desc-top,.desc-bottom{
        text-align:center;
        color:#fff;
        font-size:.62rem;
    }
    #map{
        height:2.41rem;
        background:red;
        margin-top:0.66rem;
    }
    .dingdan-info{
        background:#fff;
        font-size:.4rem;
        padding:0.24rem;
    }
    .color-gray{
        color:#999;
    }
    .dingdan-info .title{
        font-size:.4rem;
        position:relative;
        text-align:center;
    }
    .dingdan-info .title:after{
        display:block;
        content:'';
        background:#e0e0e0;
        height:.03rem;
        position:absolute;
        width:1rem;
        top:50%;
        left:1.3rem;
    }
    .dingdan-info .title:before{
        display:block;
        content:'';
        background:#e0e0e0;
        height:.03rem;
        position:absolute;
        width:1rem;
        top:50%;
        right:1.3rem;
    }
    .photo-duibi{
        margin-top:.2rem;
        background:#fff;
        padding:0 .3rem;
    }
    .photo-header{
        height:.64rem;
        line-height:.64rem;
        font-size:.48rem;
    }
    .photo-duibi .title:after{
        display:block;
        content:'';
        background:#e0e0e0;
        height:.03rem;
        position:absolute;
        width:1rem;
        top:50%;
        left:1.5rem;
    }
    .photo-duibi .title:before{
        display:block;
        content:'';
        background:#e0e0e0;
        height:.03rem;
        position:absolute;
        width:1rem;
        top:50%;
        right:1.5rem;
    }
     .photo-duibi .title{
        position:relative;
        text-align:center;
        height:1rem;
        line-height:1rem;;
        color:#e0e0e0;
        font-size:.3rem;
    }
    .photo{
        width:2.56rem;
        height:1.44rem;
        background:#d8d8d8;
    }
    .xieyi{
        font-size:.36rem;
        background:#fff;
        padding:.3rem;
        margin-top:.02rem;
    }
    time{
        text-align:right;
        display:block;
    }
    .top{
        font-size:.44rem;
    }
    .pingjia-info .right,.pingjia-info .bottom{
        font-size:.3rem;
    }
    .pingjia-info{
        padding:.2rem;
        background:#fff;
    }
    .zhuyi{
        margin-top:.26rem;
        background:#fff;
        font-size:.3rem;
        padding:.2rem;
    }
    .zhuyi .left{
        width:2rem;
        height:2rem;
    }
    .zhuyi .right{
        width:4.3rem;
        height:2rem;
    }
    .zhuyi .title{
        font-size:.45rem;
        text-align:center;
        position:relative;
        margin-bottom:.3rem;
    }
    .zhuyi .title:after{
        display:block;
        content:'';
        background:#e0e0e0;
        height:.03rem;
        position:absolute;
        width:1rem;
        top:50%;
        left:1.5rem;
    }
    .zhuyi .title:before{
        display:block;
        content:'';
        background:#e0e0e0;
        height:.03rem;
        position:absolute;
        width:1rem;
        top:50%;
        right:1.5rem;
    }
    .bg-gray{
        background:#f8f8f8;
    }
    .zhuyi .clear{
        padding:.3rem;
    }
    .phone{
        font-size:.3rem;
        padding:.2rem;
        background:#fff;
        margin:.2rem 0;
    }
    .liaojie{
        padding:.3rem;
        font-size:.4rem;
    }
    .liaojie .title{
        height:1rem;
    }
    .box{
        background:#eab1b1;
        height:3rem;
    }
</style>

